<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
This sample illustrates some basic templating features and scenarios.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
	.clickable 	{
		cursor:pointer;
		color: Blue;
	}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery.js" type="text/javascript"></script>
<script src="../../jquery.tmpl.js" type="text/javascript"></script>
<script type="text/javascript">

var dataObject = {
	firstName: "John",
	lastName: "Resig",
	url: "http://ejohn.org/",
	cities: [
		"Boston, MA",
		"San Francisco, CA"
	]
};

var arrayOfDataObjects = [
	dataObject
	,
	{
		firstName: "Dave",
		lastName: "Reed",
		url: "http://dave.org/",
		cities: [
			"Seattle, WA",
			"Los Angeles, CA",
			"New York, NY"
		]
	},
	{
		firstName: "Boris",
		lastName: "Moore",
		url: "http://boris.org/",
		cities: [
			"Redmond, WA",
			"Seattle, WA",
			"New York, NY"
		]
	}
];

function cityJoin( separator ) {
	return this.data.cities.join( separator || ", " );
}

function getName() {
	return this.data.firstName + " " + this.data.lastName;
}

function index( array ) {
	return $.inArray( this.data, array ) + 1;
}

jQuery(function(){
	// A template string
	var tmpl = '<li><a href="${url}">${getName()}</a> {{if $item.showCities}}(${cityJoin()}){{/if}}</li>';

	// Renders one LI, filled with data, then appends it into the UL
	$.tmpl( tmpl, dataObject )
		.appendTo( "ul" );

	// Store a string as a compiled template for later use
	$.template( "myTmpl", '<li>My template: <a href="${url}">${getName()}</a> {{if $item.showCities}}(${cityJoin()}){{/if}}</li>' );

	// Render stored template and insert after target.
	// Target wrapped set has more than one element, so rendered template cloned into two places in DOM
	$.tmpl( "myTmpl", dataObject )
		.insertAfter( ".multiple" );

	// Use a template declared in a script block
	// Appends multiple LIs - one for each item.
	$( "#sometmpl" )
		.tmpl( arrayOfDataObjects )
		.appendTo( "ul" );

	// Store a template declared in a script block as a named template for later use.
	$( "#sometmpl" ).template( "peopleList" );

	// Use the named template
	$.tmpl( "peopleList", arrayOfDataObjects )
		.appendTo( "ul" );

	// Set options: showCities and array, referenced within the template.
	$( "#sometmpl" )
		.tmpl( arrayOfDataObjects, { array: arrayOfDataObjects, showCities: true } )
		.prependTo( "ul" );

	// Getting to the data in a click event.
	$( "#sometmpl" )
		.tmpl( arrayOfDataObjects )
		.prependTo( "ul" )
		.find( "span" )
		.addClass( "clickable" )
		.click( function() {
			var item = $.tmplItem(this);
			alert( item.data.firstName + " at " + item.data.url );
		});

	// Example of template that has leading or trailing text
	$( "#leadingOrTrailingText" )
		.tmpl( arrayOfDataObjects )
		.insertBefore( ".target" );
});
</script>

<script id="sometmpl" type="text/x-jquery-tmpl">
	<li>
		{{if $item.array}}
			${index($item.array)} of ${$item.array.length})
		{{/if}}
		 <span>${getName()}</span>
		{{if $item.showCities}}
			Cities: {{each cities}} ${this} {{/each}}
		{{else}}
			No Cities
		{{/if}}
	</li>
</script>

<script id="leadingOrTrailingText" type="text/x-jquery-tmpl">
	${firstName} <strong>${lastName}</strong> <br/>
</script>

<ul><li class="multiple">first</li><li class="multiple">last</li></ul>

<div class="target"></div>

</body>
</html>